  <script lang="ts">
import { defineComponent,computed } from 'vue';
import { useRoute, useRouter } from 'vue-router'


export default defineComponent({
      name: 'About',
        setup() {
    // 使用 Composition API 的 useRouter 和 useRoute
    const router = useRouter();
    const route = useRoute();

    // 使用计算属性来响应式地追踪和修改查询参数
    const search = computed({
      get: () => route.query.search ?? '',
      set: (newSearch) => {
        // 使用 router.push 来添加新的 history 记录条目
        router.push({ query: { ...route.query, search: newSearch } });
      }
    });

    // 返回需要在模板中使用的响应式属性
    return {
      search,
    };
  },
  // 组件选项
});
// const router = useRouter()
// const route = useRoute()
// const search = computed({
//   get() {
//     return route.query.search ?? ''
//   },
//   set(search) {
//     router.replace({ query: { search } })
//   }
// })
</script>  

<!-- <script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()

const search = computed({
  get() {
    return route.query.search ?? ''
  },
  set(search) {
    router.replace({ query: { search } })
  }
})
</script> -->


<template>
  <h2>AboutView</h2>
  <label>
    Search: <input v-model.trim="search" maxlength="20">
  </label>


  <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item">

          <div class="bagua">
                <div class="line"></div>
                <div class="broken-line-wrapper">
                    <div class="broken-line"></div>
                    <div class="broken-line"></div>
                </div>
                <div class="line"></div>
            </div>

        </div>
        <div class="item">
            <div class="yin-yang">
                <div class="dot white-dot"></div>
                <div class="dot black-dot"></div>
            </div>
        </div>
        <div class="item"></div>
    </div>

</template>



<style scoped lang="less">  
    .container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(2, 1fr);
            gap: 10px;
            width: 500px;
            height: 500px;
            margin: auto;
        }

        .item {
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #000;
            position: relative;
        }

        .yin-yang {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: linear-gradient(white 50%, black 50%);
            position: relative;
        }

        .yin-yang::before,
        .yin-yang::after {
            content: '';
            position: absolute;
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }

        .yin-yang::before {
            top: 0;
            left: 20px;
            background: black;
        }

        .yin-yang::after {
            bottom: 0;
            left: 20px;
            background: white;
        }

        .yin-yang .dot {
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 50%;
        }

        .yin-yang .dot.white-dot {
            top: 15px;
            left: 35px;
            background: white;
        }

        .yin-yang .dot.black-dot {
            bottom: 15px;
            left: 35px;
            background: black;
        }


        .bagua {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            height: 60%;
            width: 60%;
        }

        .line {
            width: 100%;
            height: 6px;
            background-color: black;
        }

        .broken-line {
            width: 45%;
            height: 6px;
            background-color: black;
        }

        .broken-line-wrapper {
            display: flex;
            justify-content: space-between;
        }
</style>